<template>
  <div class="searchBox">
    <img :src="requireUrl" alt="" />
    <div class="title">
      Welcome to MicroPD:
      <span style="font-size: 25px"
        >a comprehensive PCR primer database for microbial detection
      </span>
    </div>
    <div class="searchBoxRow">
      <SearchInput style="width: 688px" :option="exampleOption" />
      <div class="example">
        Example:
        <span style="color: #067ebb" @click="example('Bacillus')"
          >Bacillus mycoides KBAB4</span
        >,
        <span style="color: #067ebb" @click="example('335103')">335103</span>
        <!-- <span @click="example('TAXID')">TAXID</span>,
        <span @click="example('Species')">Species</span>,
        <span @click="example('Strain')">Strain</span>, -->
        <!-- <span @click="example('GENOME_ID')">GENOME_ID</span>,
        <span @click="example('ORGANISM_NAME')">ORGANISM_NAME</span>,
        <span @click="example('ORDER')">ORDER</span>,
        <span @click="example('CLASS')">CLASS</span>,
        <span @click="example('PHYLUM')">PHYLUM</span>,
        <span @click="example('KINGDOM')">KINGDOM</span> -->
      </div>
    </div>
  </div>
  <div class="rowItem">
    <div class="headerTitle">Introduction</div>
    <div class="rowItemBox">
      <div class="box">
        <div class="carouselBox">
          <el-carousel
            :interval="5000"
            width="100"
            height="417px"
            arrow="always"
          >
            <el-carousel-item v-for="item in carouselList" :key="item">
              <el-image
                :src="item"
                style="width: 100%; height: 100%"
              ></el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <div class="box" style="background: none">
        <!-- <div class="text"> -->
        <p class="textDom">
          MicroPD (https://www.primerbanks.com/) is the
          <span class="colorFont"
            >largest dedicated PCR-primer resource for microbial detection</span
          >, offering more than <span class="colorFont">33,600,000 </span>
          rigorously evaluated primer pairs that target
          <span class="colorFont">10,309,494</span> functional genes across
          <span class="colorFont">
            36,461 bacterial, 10,430 viral and 342 fungal genomes.
          </span>
          By focusing on
          <span class="colorFont"> functional genes </span>
          (rather than traditional 16S rRNA or ITS regions), MicroPD achieves
          strain-level specificity and heightened sensitivity in complex mixed
          samples. Each primer pair record supplies
          <span class="colorFont">
            forward and reverse sequences, amplicon details, product size, GC
            content, melting temperature </span
          >and <span class="colorFont"> complete taxonomic metadata,</span>
          all navigable through a smart, taxonomy-driven search interface. This
          comprehensive platform accelerates rapid pathogen identification,
          advances studies of microbial pathogenicity and strengthens
          surveillance and control of infectious diseases.
        </p>
        <!-- </div> -->
      </div>
    </div>
  </div>
  <div class="rowItem">
    <div class="headerTitle">Statistics</div>
    <div class="whole-line echarts">
      <EchartsCom title="Number of primer pairs" :propsData="echartsData1" />
      <EchartsCom title="Number of genomes" :propsData="echartsData2" />
      <EchartsCom title="Number of genomes" :propsData="echartsData3" />
      <div class="table">
        <el-table
          :data="tableColData"
          style="width: 100%; color: #000"
          stripe
          algin="center"
        >
          <el-table-column type="index" width="120" :index="indexMethod" />
          <el-table-column prop="Bacteria" label="Bacteria" width="130" />
          <el-table-column prop="Viruses" label="Viruses" width="100" />
          <el-table-column prop="Fungi" label="Fungi" width="100" />
        </el-table>
      </div>
    </div>
  </div>
  <div class="rowItem">
    <div class="headerTitle">Quick Tutorial</div>
    <div class="whole-line quickTutorial">
      <ul class="quickTutorialUl">
        <li class="tutorialLi">
          <ButtonCom
            :text="`Search primers`"
            @click="router.push('/search/viruses')"
          ></ButtonCom>
          <p class="comStyle">
            <img src="@/assets/svg/hxz.svg" class="hzx" alt="" />
            Based on the taxonomy information of microbes including viruses,
            bacteria and fungi, users can search the primer pairs targeting all
            genes from a particular microorganism. Moreover, users can further
            filter primers of interest according to the primer score, etc. The
            detailed page can provide more information about the primer of
            interest when clicking on the "PrimerID".
          </p>
        </li>
        <li class="tutorialLi">
          <ButtonCom
            :text="`Browse primers`"
            @click="router.push('/dataBrowse')"
          ></ButtonCom>
          <p class="comStyle">
            <img src="@/assets/svg/hxz.svg" class="hzx" alt="" />
            The "Data-Browse" page is an interactive and
            alphanumerically-sortable table that allows users to quickly search
            for primer pairs and customize filters using taxonomy information
            including family, species and organism name, etc. The
            "Genome-Browser" page enables users to browse genes and
            corresponding primer pairs on a particular microbial genome.
          </p>
        </li>
        <li class="tutorialLi">
          <ButtonCom
            :text="`Download`"
            @click="router.push('/Download')"
          ></ButtonCom>
          <p style="" class="comStyle">
            <img src="@/assets/svg/hxz.svg" class="hzx" alt="" />
            The "Download" page is an interactive table allows users to quickly
            search and download information including primer pairs (.csv), genes
            annotation (.gff), genome sequences (.fna), specific genes
            annotation (.bed), nucleic acids (.fa) and protein sequences (.faa).
          </p>
        </li>
      </ul>
    </div>
  </div>
  <div class="mapRowItem">
    <div class="mapRowContentBox">
      <div class="headerTitle">Updates</div>
      <!-- 时间线 -->
      <div class="timeline">
        <!-- 第一行 -->
        <div class="timeLineItem">
          <div class="time">2025/05/11</div>
          <div class="line">
            <span class="y"></span>
            <span class="l"></span>
          </div>
          <div class="cardBox">
            <div class="version">Version 1.0.2</div>
            <div class="text">Upgraded MicroPD and improved interface</div>
          </div>
        </div>
        <!-- 第一行 -->
        <div class="timeLineItem">
          <div class="time">2025/01/21</div>
          <div class="line">
            <span class="y"></span>
            <span class="l"></span>
          </div>
          <div class="cardBox">
            <div class="version">Version 1.0.1</div>
            <div class="text">First update of MicroPD genome browser</div>
          </div>
        </div>
        <!-- 第二行 -->
        <div class="timeLineItem">
          <div class="time">2024/11/29</div>
          <div class="line">
            <span class="y"></span>
            <span class="l"></span>
          </div>
          <div class="cardBox">
            <div class="version">Version 1.0.0</div>
            <div class="text">MicroPD first release</div>
          </div>
        </div>
      </div>
      <!-- <el-timeline style="max-width: 600px">
        <el-timeline-item timestamp="2025/01/21" placement="top">
          <el-card>
            <h4>Version 1.0.1
            </h4>
            <p>First update of MicroPD genome browser
</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2024/11/29
" placement="top">
          <el-card>
            <h4>Version 1.0.0
</h4>
            <p>MicroPD first release
</p>
          </el-card>
        </el-timeline-item>
      </el-timeline> -->
    </div>
    <div class="mapRowContentBox">
      <div class="headerTitle">Visitors</div>
      <iframe
        id="iframe1"
        ref="myIframe"
        src="/map.html"
        frameborder="0"
        style="width: 100%; height: 100%"
      ></iframe>
      <!-- <Map style="width: 100%; height: 100%" /> -->
    </div>
  </div>
</template>

<script setup>
import EchartsCom from "@/components/EchartsCom.vue";
import { ref, onMounted, reactive } from "vue";
import SearchInput from "@/components/SearchInput.vue";
import ButtonCom from "@/components/ButtonCom.vue";
import router from "@/router/index";
import Map from "@/components/Map.vue";
let tableOneRow = [
  "Kingdom",
  "Phylum",
  "Class",
  "Gigaorder",
  "Family",
  "Genus",
  "Species",
  "Organism",
];
const indexMethod = (index) => {
  return tableOneRow[index];
};

const tableColData = [
  {
    Bacteria: 4,
    Viruses: 10,
    Fungi: 0,
  },
  {
    Bacteria: 53,
    Viruses: 17,
    Fungi: 3,
  },
  {
    Bacteria: 115,
    Viruses: 38,
    Fungi: 25,
  },
  {
    Bacteria: 278,
    Viruses: 64,
    Fungi: 57,
  },
  {
    Bacteria: 704,
    Viruses: 220,
    Fungi: 109,
  },
  {
    Bacteria: 3276,
    Viruses: 2537,
    Fungi: 186,
  },
  {
    Bacteria: 2116,
    Viruses: 6397,
    Fungi: 153,
  },
  {
    Bacteria: 24132,
    Viruses: 10228,
    Fungi: 342,
  },
];
const carouselList = ref([
  "http://www.primerbanks.com/geneData/getBanner/home_1.png",
  "http://www.primerbanks.com/geneData/getBanner/home_2.png",
  "http://www.primerbanks.com/geneData/getBanner/home_3.png",
  "http://www.primerbanks.com/geneData/getBanner/home_4.png",
  "http://www.primerbanks.com/geneData/getBanner/home_5.png",
  "http://www.primerbanks.com/geneData/getBanner/home_6.png",
]);
const exampleOption = ref("");
// 饼状图数据
const echartsData1 = {
  title: {
    left: "center",
  },
  grid: {
    left: "10%",
    bottom: "10%",
    containLabel: true,
  },

  tooltip: {
    trigger: "item",
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 33044877";
      } else if (value.dataIndex == 1) {
        return "Viruses 633985";
      } else if (value.dataIndex == 2) {
        return "Fungi 15949";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000", //坐标值得具体的颜色,
        fontFamily: "Helvetica Neue",
      },
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Primer pairs)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
  },
  series: [
    {
      data: [
        { value: 24.97792, itemStyle: { color: "#526E53" } },
        { value: 19.27409, itemStyle: { color: "#C7B9C2" } },
        { value: 13.96118, itemStyle: { color: "#659B9A" } },
      ],
      type: "bar",
    },
  ],
};
//  饼状图数据2
const echartsData2 = {
  title: {
    left: "center",
  },
  grid: {
    left: "10%",
    bottom: "10%",
    containLabel: true,
  },
  tooltip: {
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    trigger: "item",
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 36461";
      } else if (value.dataIndex == 1) {
        return "Viruses 10430";
      } else if (value.dataIndex == 2) {
        return "Fungi 342";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Genomes)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      color: "#000", //颜色,
    },
  },
  series: [
    {
      data: [
        { value: 15.154067, itemStyle: { color: "#526E53" } },
        { value: 13.348452, itemStyle: { color: "#C7B9C2" } },
        { value: 8.417853, itemStyle: { color: "#659B9A" } },
      ],
      type: "bar",
    },
  ],
};
//  饼状图数据3
const echartsData3 = {
  title: {
    left: "center",
  },
  grid: {
    left: "10%",
    bottom: "10%",
    containLabel: true,
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      color: "#000",
      fontFamily: "Helvetica Neue",
    },
    formatter: function (value) {
      console.log("value", value);
      if (value.dataIndex == 0) {
        return "Bacteria 10176682";
      } else if (value.dataIndex == 1) {
        return "Viruses 132325";
      } else if (value.dataIndex == 2) {
        return "Fungi 487";
      }
    },
  },
  xAxis: {
    type: "category",
    data: ["Bacteria", "Viruses", "Fungi"],
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
      fontFamily: "Helvetica Neue",
    },
  },
  yAxis: {
    type: "value",
    name: `log2(#Genes)`,
    nameLocation: "center",
    axisLabel: {
      textStyle: {
        color: "#000",
        fontFamily: "Helvetica Neue",
      },
    },
    nameTextStyle: {
      padding: [0, -20, 20, 0],
      fontFamily: "Helvetica Neue",
      fontWeight: 600,
      color: "#000",
    },
  },
  series: [
    {
      data: [
        { value: 23.278764, itemStyle: { color: "#526E53" } },
        { value: 17.013726, itemStyle: { color: "#C7B9C2" } },
        { value: 8.927778, itemStyle: { color: "#659B9A" } },
      ],
      type: "bar",
    },
  ],
};
// 快捷搜索（数据暂时模拟，取search接口type病毒第一条数据
const example = (type) => {
  switch (type) {
    case "TAXID":
      exampleOption.value = "262177";
      break;
    case "Family":
      exampleOption.value = "Baculoviridae";
      break;
    case "Genus":
      exampleOption.value = "Alphabaculovirus";
      break;
    case "Species":
      exampleOption.value = "Alphabaculovirus orpseudotsugatae";
      break;
    case "Strain":
      exampleOption.value = "70-15";
      break;
    case "GENOME_ID":
      exampleOption.value = "GCF_000837125.1";
      break;
    case "ORGANISM_NAME":
      exampleOption.value = "Burana virus";
      break;
    case "ORDER":
      exampleOption.value = "Bunyavirales";
      break;
    case "CLASS":
      exampleOption.value = "Ellioviricetes";
      break;
    case "PHYLUM":
      exampleOption.value = "Negarnaviricota";
      break;
    case "KINGDOM":
      exampleOption.value = "Orthornavirae";
      break;
    case "335103":
      exampleOption.value = "335103";
      break;
    case "Bacillus":
      exampleOption.value = "Bacillus mycoides KBAB4";
      break;
    default:
      break;
  }
};
</script>
<style scoped lang="scss">
@media (max-width: 1400px) {
  .searchBox {
  }

  .box {
    width: 100% !important;
  }

  .rowItem {
    margin: 0 auto;

    .rowItemBox {
      display: block !important;
    }
  }
}

.searchBox {
  .title {
    font-size: 35px;
    text-align: left;
  }

  .searchBoxRow {
    display: flex;
    align-items: end;

    .example {
      width: 60%;
      text-align: left;
      padding-left: 10px;
      font-size: 21px;

      span {
        &:hover {
          color: #3b9d6e;
          cursor: pointer;
        }
      }
    }
  }
}

ul {
  list-style: none;
  padding: 10px;
}

.rowItem {
  margin: 20px 0;
  border: 1px solid #a4a4a4;
  border-radius: 10px;
  overflow: hidden;

  .headerTitle {
    text-align: left;
    background: #d8e2eb;
    font-size: 24px;
    padding-left: 20px;
    color: #000;
    line-height: 50px;
    border-bottom: 1px solid #a4a4a4;
  }

  .rowItemBox {
    display: flex;
    justify-content: space-between;
    padding: 20px 20px 0 20px;
  }
}

.rowItem .box {
  width: 49%;
  border-radius: 10px;
}

.box {
  /* border: 1px solid #d7d7d7; */
  /* padding: 20px; */
  box-shadow: 2px 2px 4px 2px #d7d7d7 !important;
  margin-bottom: 30px;
  border-radius: 10px;
  overflow: hidden;

  .title {
    font-size: 36px;
    font-weight: 600;
    text-align: left;
    line-height: 80px;
  }

  p {
    text-align: left;
    font-size: 16px;
    letter-spacing: 2px;
  }
}

.box:first-child {
  box-shadow: none !important;
}

.box:last-child {
  box-shadow: none;
}

.whole-line {
  width: 100%;
  box-sizing: content-box;
  height: 400px;

  .header {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #d7d7d7;
  }

  .contentBox {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    text-align: left;

    .left,
    .right {
      width: 30%;

      .title {
        font-size: 24px;
        line-height: 30px;
        padding: 10px;
        border-top: 2px solid #d7d7d7;
        border-bottom: 2px solid #d7d7d7;
      }
    }
  }
}

.textDom {
  padding: 0 20px;
  text-align: justify !important;
  text-justify: inter-word !important;
  line-height: 24px;
  /* 优化单词间距 */
  /* 允许断字 */
  font-size: 18px !important;
}

.chart {
  height: 400px;
}

.newsAndUpdate {
  height: 480px;

  .titlesBox {
    display: flex;

    div {
      padding: 10px 30px;
      width: 50%;
      text-align: left;
    }
  }

  .contentBox {
    display: flex;
    justify-content: space-between;
    height: 100%;
  }

  .title {
    font-size: 30px;
    font-weight: 600;
    text-align: left;
  }

  .update,
  .news {
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    overflow: auto;
    height: 380px;
    padding: 20px;
  }

  .news ul {
    width: 100%;
  }

  .news ul li {
    height: 100px;
    margin-bottom: 20px;
    line-height: 100px;
    width: 100%;
    box-shadow: 2px 2px 4px 2px #d7d7d7;
    border-radius: 10px;
    padding: 10px;
  }

  .el-timeline {
    width: 100%;
  }
}

/* 滚动条样式优化 */
.update::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: none;
}

.update::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.update::-webkit-scrollbar-thumb {
  background-color: rgb(147, 147, 153, 0.5);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.news::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: none;
}

.news::-webkit-scrollbar-track {
  background-color: transparent;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.news::-webkit-scrollbar-thumb {
  background-color: rgb(147, 147, 153, 0.5);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.carouselBox {
  height: 100%;
}

.echarts {
  display: flex;
  box-shadow: 2px 2px 4px 2px #d7d7d7 !important;
  padding: 20px 30px 20px 30px !important;
}

::v-deep .table {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  margin-right: 50px;

  td {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  }

  .tableCol {
    text-align: left;
    font-size: 14px;
  }

  .tableCol2 {
    width: 300px;
    font-size: 16px;
  }

  .cell {
    color: #000 !important;
    font-size: 14px !important;
  }

  tr {
    .cell {
      font-size: 18px !important;
    }
  }
}

.quickTutorial {
  height: auto !important;
  padding-bottom: 10px;

  .quickTutorialUl {
    display: flex;

    li {
      width: 33.3%;
      padding: 0 30px;
      // cursor: pointer;

      // &:hover {
      //   color: #006837;
      // }
    }
  }
}

tr {
  line-height: 35px;
}

.hzx {
  width: 30px;
  height: 30px;
  position: absolute;
  left: 0px;
  top: -5px;
}

.colorFont {
  color: #004f88;
  font-weight: bold;
}

.comStyle {
  text-indent: 2em;
  font-size: 18px !important;
  position: relative;
  text-align: justify !important;
  text-justify: inter-word !important;
  /* 优化单词间距 */
  // hyphens: auto !important;
  /* 允许断字 */
}

.mapRowItem {
  width: 100%;
  margin: 20px 0;

  display: flex;
  justify-content: space-between;

  .mapRowContentBox {
    width: 49%;
    border: 1px solid #a4a4a4;
    overflow: hidden;
    border-radius: 10px;
  }

  .headerTitle {
    text-align: left;
    background: #d8e2eb;
    font-size: 24px;
    padding-left: 20px;
    color: #000;
    line-height: 50px;
    border-bottom: 1px solid #a4a4a4;
  }
}

.test {
  width: 100%;
  height: 100px;
  background-color: red;
}

.timeline {
  height: 330px;
  overflow-y: auto;

  .timeLineItem {
    display: flex;
    margin: 40px 30px;

    .time {
      font-size: 16px;
      font-family: "Helvetica Neue" !important;
      color: #8f8f8f;
    }

    .cardBox {
      text-align: left;
      color: #000;
      height: 100%;
      width: 400px;
      padding: 12px;
      line-height: 38px;
      margin-left: 30px;
      background-color: #fff;
      box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
        0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);

      .version {
        font-size: 20px;
      }

      .text {
        color: #3a3a3a;
        font-size: 16px;
      }
    }

    .line {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 20px;

      .y {
        display: block;
        height: 8px;
        width: 8px;
        border: 4px solid rgb(160, 81, 149);
        border-radius: 90px;
        margin-bottom: 8px;
        margin-top: 3px;
      }

      .l {
        display: block;
        height: 80px;
        width: 2px;
        background-color: #bdbdbd;
      }
    }
  }
}
</style>
